<template>
    <div class="mask ">
        <div class="main">
            <h1 class="header">
                邀请协作人员
            </h1>
            <div class="menu-box">
                <a @click="changePageType(1)" class="button  pointer" :class="pageType === 1? 'button-active' :''">邀请公司人员</a>
                <!--<a @click="changePageType(2)" class="button pointer"-->
                <!--:class="pageType > 1? 'button-active' :''">邀请外部人员</a>-->
            </div>
            <div class="second-menu-box" v-show="pageType > 1">
                <a class="button" :class="pageType ===2? 'active' :''" @click="changePageType(2)">
                    <img src="@/assets/icon/team/history_icon.png">
                    <span>历史邀请人员</span>
                </a>
                <a class="button" :class="pageType ===3? 'active' :''" @click="changePageType(3)">
                    <img src="@/assets/icon/team/phone.png">
                    <span>通过手机号邀请</span>
                </a>
                <a class="button" :class="pageType ===4? 'active' :''" @click="changePageType(4)">
                    <img src="@/assets/icon/team/link_icon.png">
                    <span>通过链接邀请</span>
                </a>
            </div>
            <div class="link-box" v-show="pageType === 4">
                <div class="box" style="height: 32px">
                    <label class="label fl">邀请链接</label>
                    <p class="link fl">https://pan.ddbes.com/pan.html#/color:%20#4690F5;</p>
                    <select-roles v-model="linkRoles" class="roles-select-box fl"></select-roles>
                </div>
                <div class="box">
                    <label class="label fl">邀请期限</label>
                    <div class="time-select-box fl">
                        <div class="choose-time text-center" @click="showTimeList">七天有效</div>
                        <ul class="select-time-list" v-if="timeList">
                            <li>七天有效</li>
                            <li>一天有效</li>
                            <li>永久有效</li>
                        </ul>
                    </div>
                </div>
                <div class="button-box">
                    <p>链接已复制到剪切板</p>
                    <button class="cencel" @click.stop="closeModel">取消</button>
                    <button class="copy">复制链接</button>
                </div>
            </div>
            <div class="phone-box" v-show="pageType === 3">
                <ul>
                    <li v-for="(data,key) in phoneList" :key="key">
                        <div class="phone fl">
                            <img class="fl icon" src="@/assets/icon/team/phone.png">
                            <input v-model="data.phone" placeholder="请输入被邀请人的手机号">
                            <img class="delete-icon" @click.stop="deletePhoneInpur(key)"
                                 src="@/assets/icon/delete_icon.png">
                        </div>
                        <select-roles v-model="data.roles" class="select-box fl"></select-roles>
                    </li>
                    <li>
                        <div class="add-box text-center pointer" @click="addPhoneInput">+</div>
                    </li>
                </ul>
                <div class="button-box">
                    <button class="cencel" @click.stop="closeModel">取消</button>
                    <button class="copy">确定</button>
                </div>
            </div>
            <div class="user-list-box " v-show="pageType < 3">
                <div class="will-choose fl" :class="pageType === 1? 'in-company' : ''">
                    <div class="search-box">
                        <img src="@/assets/icon/team/search.png">
                        <input placeholder="搜索邀请人员" v-model="searchText" @keyup.enter="searchMember">
                    </div>
                    <div class="select-all">
                        <input class="checkbox" type="checkbox" v-model="isChooseAll" @click="chooseAll">
                        <span class="checkbox-name">全选</span>
                    </div>
                    <loading v-show="userLoading"></loading>
                    <ul class="user-box relative">
                        <li class="box" v-for="(userData, key) in userList" :key="key">
                            <h1 class="title" v-text="userData.letter"></h1>
                            <ul>
                                <li class="user-info" v-for="(userInfo, key) in userData.data" :key="'user_' + key">
                                    <input :checked="chooseList.indexOf(userInfo.userId) > -1" type="checkbox" class="fl"
                                           @click="chooseUser($event,userInfo)">
                                    <head-icon fontSize="12px" size="32px" class="fl header-icon" :border="null"
                                               :name="userInfo.name" :img="userInfo.headimg"></head-icon>
                                    <div class="fl">
                                        <p class="name" v-text="userInfo.name"></p>
                                        <p class="dept" v-text="userInfo.deptName"></p>
                                    </div>
                                </li>
                            </ul>

                        </li>
                    </ul>
                </div>
                <div class="choose-list fl " :class="pageType === 1? 'in-company' : ''">
                    <h1>已选成员（<span v-text="chooseUserInfoList.length"></span>）</h1>
                    <ul>
                        <li v-for="(userInfo, key) in chooseUserInfoList" :key="'user_' + key">
                            <head-icon fontSize="12px" size="32px" class="fl header-icon" :border="null"
                                       :name="userInfo.name" :img="userInfo.headimg">
                                <img @click.stop="cencelUser(userInfo)" src="@/assets/icon/team/delete_icon.png"
                                     class="delete-button pointer">
                            </head-icon>
                            <div class="fl">
                                <p class="name" v-text="userInfo.name"></p>
                                <p class="dept" v-text="userInfo.deptName"></p>
                            </div>
                            <div class="fr edit-button relative pointer">
                                <p class="edit-text" @click="showEditList(userInfo)" v-text="userInfo.roleName">编辑</p>
                                <ul v-show="userInfo.showEdit">
                                    <li v-for="(role,key) in rolesList" :key="key" @click="chooseRole(userInfo,role)">
                                        <p v-text="role.name"></p>
                                    </li>
                                </ul>

                            </div>
                        </li>
                    </ul>
                </div>
                <div class="button-box">
                    <button class="cencel" @click.stop="closeModel">取消</button>
                    <button class="copy" @click="addCooperateUser">
                        <span v-show="!loading">确定</span>
                        <img v-show="loading" class="loading-icon" src="@/assets/icon/login/loading.png">
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  import SelectRoles from '@/components/FileList/SelectRoles.vue'
  import HeadIcon from '@/components/HeadIcon.vue'
  import Loading from '@/components/Loading.vue'

  export default {
    name: "TeamInvite",
    components: {
      SelectRoles,
      HeadIcon,
      Loading
    },
    props: {
      fileUserList:{
        type: Array,
        default: function () {
          return {}
        }
      },
      fileData: {
        type: Object,
        default: function () {
          return {}
        }
      },
      rolesList: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    computed:{
      originalUserList(){
        const newArr = this.fileUserList.map(function (userInfo) {
          return userInfo.userId
        })
        return newArr
      }
    },
    data() {
      return {
        loading:false,
        searchText: '',
        userLoading: false,
        pageType: 1,
        userList: [],
        initUserList: [],
        phoneList: [
          {phone: '', roles: 1}
        ],
        linkRoles: 3,
        chooseList: [],
        isChooseAll: false,
        timeList: false,
        chooseUserInfoList: []
      }
    },
    mounted() {
      this.getCompanyUserList()
    },
    methods: {
      searchMember: function () {
        const that = this
        const searchList = this.initUserList.filter(function (value) {
          return value.name.indexOf(that.searchText) > -1
        })
        if (searchList.length === 0) {
          return this.$message({
            type: 'error',
            message: '没有搜索到相关人员'
          })
        }
        that.userList = that.publicFun.characterSort(searchList)

      },
      addCooperateUser: function () {
        const that = this;
        if(this.loading) return
        const postList = this.rebuildChooseUsers()
        if (postList.length === 0) {
          return this.$message({
            type: 'error',
            message: '请选择添加人员'
          })
        }
        this.loading = true
        this.$http.post('/pan/file/cooperate/multiple/v1', {
          users: postList
        }).then(function (data) {
          if (data.data.code === 1) {
            that.$message({type: 'success', message: '添加成功'})
            that.$emit('addUser')
            that.closeModel()
          }
          that.loading  = false
        })
      },
      rebuildChooseUsers: function () {
        let postList = []
        const that = this
        this.chooseUserInfoList.forEach(function (data) {
          postList.push({
            fileId: that.fileData.fileId,
            roleId: data.roleId,
            userId: data.userId
          })
        })
        return postList
      },
      cencelUser: function (userInfo) {
        const index = this.chooseList.indexOf(userInfo.userId);
        this.chooseList.splice(index, 1);
        this.checkChooseAll()
        this.getChooseUserList()
      },


      showEditList: function (userInfo) {
        userInfo.showEdit = true
      },

      chooseRole: function (userInfo, role) {
        userInfo.showEdit = false
        userInfo.roleId = role.id
        userInfo.roleName = role.name
      },

      getCompanyUserList: function () {
        const that = this
        this.userLoading = true
        const url = 'organization/personnel/schedule/' + this.$store.state.company.companyInfo.companyId + '/0/members'
        this.$http.get(url).then(function (data) {
          if (data.data.code === 1) {
            that.initUserList = that.rebuildDeptUser(data.data.data.deptList)
            that.userList = that.publicFun.characterSort(that.initUserList)
          }
          that.userLoading = false
        })
      },



      closeModel: function () {
        this.$emit('closeModel', false)
      },

      rebuildDeptUser: function (deptList) {
        let userList = []
        const that = this;
        deptList.forEach(function (dept) {
          dept.allMembers.forEach(function (member) {
            member.deptName = dept.deptName
            member.showEdit = false
            member.roleId = 'EDITOR'
            member.roleName = '编辑'
            if(that.originalUserList.indexOf(member.userId)  < 0){
              userList.push(member)
            }
          })
        })
        return userList
      },

      addPhoneInput: function () {
        this.phoneList.push({
          phone: '',
          roles: 2
        })
      },

      deletePhoneInpur: function (index) {
        this.phoneList.splice(index, 1);
      },

      changePageType: function (type) {
        this.pageType = type
      },
      chooseAll: function (event) {
        if (event.target.checked) {
          this.chooseList = this.userList.map(function (value) {
            return value.userId
          })
        } else {
          this.chooseList = []
        }
        this.getChooseUserList()
      },
      checkChooseAll: function () {
        if (this.chooseList.length !== 0 && this.chooseList.length === this.userList.length) {
          this.isChooseAll = true
        } else {
          this.isChooseAll = false
        }
      },
      chooseUser: function (event, userInfo) {
        if (event.target.checked) {
          this.chooseList.push(userInfo.userId)
        } else {
          const index = this.chooseList.indexOf(userInfo.userId);
          if (index > -1) {
            this.chooseList.splice(index, 1);
          }
        }
        this.checkChooseAll()
        this.getChooseUserList()
      },
      showTimeList: function () {
        this.timeList = !this.timeList
      },
      getChooseUserList: function () {
        const that = this
        this.chooseUserInfoList = this.initUserList.filter(function (value) {
          return that.chooseList.indexOf(value.userId) > -1
        })
      }
    }
  }
</script>

<style scoped>

    .mask {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 500;
    }

    .main {
        width: 678px;
        height: 514px;
        margin: calc((100vh - 514px) / 2) auto 0;
        background: white;
        border-radius: 2px;
        position: relative;
    }

    .main .header {
        height: 45px;
        background: #F2F4F9;
        font-size: 14px;
        color: #333333;
        letter-spacing: 1px;
        text-align: center;
        line-height: 45px;

    }

    .main .menu-box {
        height: 40px;
        border-bottom: 1px solid #E3E4ED;;
    }

    .main .menu-box .button {
        font-size: 12px;
        color: #333333;
        letter-spacing: 0.86px;
        line-height: 40px;
        width: 100px;
        text-align: center;
        margin-left: 40px;
        position: relative;
    }

    .main .menu-box .button-active:before {
        content: '';
        height: 2px;
        position: absolute;
        width: 34px;
        background: #4690F5;
        top: 28px;
        left: 0;
        right: 0;
        margin: auto;
    }

    .main .second-menu-box {
        height: 35px;
    }

    .main .second-menu-box .active {
        color: #4690F5 !important;
    }

    .main .second-menu-box .button {
        margin: 0 20px;
        line-height: 35px;
        font-size: 12px;
        color: #333333;
        letter-spacing: 0.86px;
        cursor: pointer;
    }

    .main .second-menu-box .button img {
        height: 14px;
        width: 14px;
        margin-top: -2px;
        margin-right: 2px;
    }

    .main .link-box {
        padding-left: 32px;
    }

    .main .link-box .box {
        margin-top: 10px;
        height: 32px;
    }

    .main .button-box {
        position: absolute;
        right: 40px;
        bottom: 30px
    }

    .main .button-box p {
        font-size: 12px;
        color: #4690F5;
        letter-spacing: 0.86px;
        margin-bottom: 20px;
        text-align: right;
    }

    .main .button-box button {
        border-radius: 2px;
        font-size: 12px;
        letter-spacing: 0.86px;
        height: 30px;
        width: 92px;
    }

    .main .button-box .cencel {
        border: 1px solid #D8D9E5;
        margin-right: 30px;
        box-sizing: border-box;
    }

    .main .button-box .copy {
        background: #4690F5;
        border: none;
        color: #FFFFFF;
        float: right;
    }

    .main .link-box .label {
        font-size: 14px;
        line-height: 32px;
        color: #333333;
        letter-spacing: -0.34px;
    }

    .main .link-box .time-select-box {
        margin-left: 10px;
    }

    .main .link-box .time-select-box .choose-time {
        cursor: pointer;
        position: relative;
        width: 143px;
        height: 32px;
        border: 1px solid rgba(151, 151, 151, 0.66);
        line-height: 30px;
        font-size: 14px;
        color: #333333;
        letter-spacing: -0.34px;
        border-radius: 2px;
        padding-right: 10px;
        box-sizing: border-box;
    }

    .main .link-box .time-select-box .select-time-list {
        background: #FFFFFF;
        box-shadow: 0 1px 6px 0 rgba(157, 163, 165, 0.50);
        width: 143px;
        padding: 12px 0;
        box-sizing: border-box;
    }

    .main .link-box .time-select-box .select-time-list li {
        font-size: 14px;
        color: #666666;
        letter-spacing: 1px;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
    }

    .main .link-box .time-select-box .select-time-list li:hover {
        background: rgba(220, 222, 227, 0.61);
    }

    .main .link-box .time-select-box .choose-time:before {
        position: absolute;
        content: '';
        right: 15px;
        top: 13px;
        border-width: 5px 4px 0;
        border-style: solid;
        border-color: #6D6E8C transparent transparent;
    }

    .main .link-box .roles-select-box {
        margin-left: 20px;
        margin-top: 10px;

    }

    .main .link-box .link {
        background: #E2E7F2;
        border-radius: 2px;
        line-height: 32px;
        font-size: 14px;
        color: #8E8E93;
        letter-spacing: -0.34px;
        padding: 0 29px;
        margin-left: 10px;
        width: 470px;
        box-sizing: border-box;
    }

    .main .user-list-box {
        width: 100%;
    }

    .main .user-list-box .in-company {
        padding-top: 15px;
    }

    .main .user-list-box .choose-list {
        width: calc(100% - 380px);
        padding-left: 27px;
        height: 310px;
        box-sizing: border-box;
    }

    .main .user-list-box .choose-list .edit-button {
        line-height: 40px;
    }

    .main .user-list-box .choose-list .edit-button .edit-text {
        line-height: 30px;
        position: relative;
        padding-right: 20px;
        width: 80px;
        text-align: center;

    }

    .main .user-list-box .choose-list .edit-button .edit-text:before {
        position: absolute;
        content: '';
        right: 0px;
        top: 12px;
        border-width: 5px 4px 0;
        border-style: solid;
        border-color: #6D6E8C transparent transparent;
    }

    .main .user-list-box .choose-list .edit-button ul {
        z-index: 200;
        right: 1px;
        background: white;
        box-shadow: #8a8b90 0px 1px 27px -14px;
        position: absolute;
        overflow: visible;
        width: 80px;
        height: auto;
        margin: 0;
        padding: 0;
    }

    .main .user-list-box .choose-list .edit-button ul li {
        height: 20px;
        padding: 0;
        width: 100%;
        margin-bottom: 3px;
        cursor: pointer;
    }

    .main .user-list-box .choose-list .edit-button ul li p {
        line-height: 20px;

    }


    .main .user-list-box .choose-list .delete-button {
        height: 16px;
        position: absolute;
        right: -5px;
        top: -5px;
        width: 16px;
    }

    .main .user-list-box .choose-list ul {
        padding-top: 15px;
        overflow: auto;
        height: 280px;
        margin-top: 10px;

    }

    .main .user-list-box .choose-list ul li {
        height: 40px;
        margin-bottom: 10px;
        padding-right: 50px;
    }

    .main .user-list-box .choose-list ul li .user-name {
        font-size: 12px;
        color: #333333;
        letter-spacing: 0.86px;
        line-height: 40px;
        margin-left: 16px;
    }

    .main .user-list-box .choose-list ul li p {
        font-size: 12px;
        color: #333333;
        letter-spacing: 0.86px;
        margin-left: 15px;
        line-height: 16px;
    }

    .main .user-list-box .choose-list ul li .dept {
        color: #999999;
    }

    .main .user-list-box .choose-list ul li .roles-select-box {
        margin-top: 5px;
    }

    .main .user-list-box .choose-list h1 {
        font-size: 12px;
        color: #333333;
        letter-spacing: 0.86px;
    }


    .main .user-list-box .will-choose {
        width: 369px;
        height: 360px;
        border-right: 1px solid #E3E4ED;
    }

    .main .user-list-box .will-choose .search-box {
        background: #E2E7F2;
        border-radius: 16px;
        width: 311px;
        height: 29px;
        margin-left: 28px;
    }

    .main .user-list-box .will-choose .search-box img {
        height: 16px;
        width: 16px;
        margin: 6px 0 6px 10px;
    }

    .main .user-list-box .will-choose .search-box input {
        height: 27px;
        border: none;
        background: #E2E7F2;
        width: 250px;
        font-size: 14px;
        letter-spacing: -0.34px;
        line-height: 27px;
        margin-left: 5px;
    }

    .main .user-list-box .will-choose .search-box input::placeholder {
        color: #8E8E93;
    }

    .main .user-list-box .will-choose .select-all {
        padding-left: 26px;
        height: 30px;
        padding-top: 10px;
    }

    .main .user-list-box .will-choose .checkbox {
        height: 12px;
        width: 12px;
    }

    .main .user-list-box .will-choose .checkbox-name {
        font-size: 12px;
        color: #333333;
        letter-spacing: 0.86px;
        margin-left: 10px;
    }

    .main .user-list-box .user-box {
        max-height: 280px;
        overflow: auto;
    }

    .main .user-list-box .user-box .box {
        padding-bottom: 10px;
    }

    .main .user-list-box .user-box .user-info {
        height: 32px;
        margin-top: 10px;
        padding-left: 26px;
    }

    .main .user-list-box .user-box .user-info input {
        margin: 8px 0;
    }

    .main .user-list-box .user-box .user-info .header-icon {
        margin-left: 21px;
    }

    .main .user-list-box .user-box .user-info p {
        font-size: 12px;
        color: #333333;
        letter-spacing: 0.86px;
        margin-left: 15px;
        line-height: 16px;
    }

    .main .user-list-box .user-box .user-info .dept {
        color: #999999;
    }

    .main .user-list-box .user-box .title {
        background: #F1F1F2;
        height: 20px;
        font-size: 12px;
        color: #909090;
        letter-spacing: 0.86px;
        line-height: 20px;
        padding-left: 28px;
    }

    .main .phone-box {

    }

    .main .phone-box ul {
        padding-left: 60px;
    }

    .main .phone-box ul li {
        height: 32px;
        margin-top: 15px;
    }


    .main .phone-box ul .phone {
        width: 346px;
        height: 32px;
        position: relative;
        background: #E2E7F2;
        border-radius: 2px;
    }

    .main .phone-box ul .phone .icon {
        width: 19px;
        height: 21px;
        margin: 5px 0 0 10px;
    }


    .main .phone-box ul .phone:hover .delete-icon {
        display: block;
        cursor: pointer;
    }

    .main .phone-box ul .phone .delete-icon {
        display: none;
        position: absolute;
        right: 13px;
        height: 13px;
        width: 13px;
        top: 10px;
    }

    .main .phone-box ul .add-box {
        width: 346px;
        height: 32px;
        box-sizing: border-box;
        border: 1px dashed #A1A1A1;
        border-radius: 2px;
        color: #C8C9D3;
        line-height: 30px;
        font-size: 24px;
    }

    .main .phone-box ul .select-box {
        margin-top: 7px;
        margin-left: 43px;
    }

    .main .phone-box ul .phone input {
        width: 270px;
        border: none;
        height: 30px;
        background: #E2E7F2;
        margin-left: 20px;
    }

    .main .phone-box ul .phone input::placeholder {
        font-size: 14px;
        color: #8E8E93;
        letter-spacing: -0.34px;
        line-height: 30px;
    }

</style>
